<!-- 登录页面 -->
<template>
  <div>
  <div id="outDiv">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="padding-right: 15vw;"
    >
      <el-form-item label="账号:" prop="UerName">
        <el-input v-model="ruleForm.UerName"></el-input>
      </el-form-item>

      <el-form-item label="密码:" prop="pass">
        <el-input
          type="password"
          v-model="ruleForm.pass"
          autocomplete="off"
        ></el-input>
      </el-form-item>

     <div id="chooseBtn">
      <el-form-item style="width: 25vw;margin:0 3vw;">
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          style="width: 10vw;"
          >登录</el-button>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="register"
          style="width: 10vw;"
          >注册</el-button>
      </el-form-item>
    </div>
    </el-form>
  </div>
  <Special/>
</div>
</template>
<script>
import Special from '../../components/Special/special.vue';
export default {
  components: { Special, Special },
  data() {
    var checkName = (rule, value, callback) => {//判断用户名字
      if (!value) {
        return callback(new Error("账号不能为空"));
      }
      setTimeout(() => {
        if (String(value).length < 2) {
          callback(new Error("用户名字错误！！"));
        } else {
          callback();
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {//判断用户密码
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      user: this.$store.state.user,
      ruleForm: {
        pass: "",
        checkPass: "",
        UerName: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        UerName: [{ validator: checkName, trigger: "blur" }],
      },
    };
  },
  methods: {
    register(){//跳转到注册页面
        this.$router.push('/resiger')
    },
    submitForm(formName) {//提交数据
      let nweThis=this.ruleForm
      let abc=Array.from(this.user).some(item=>{//判断用户是否存在
        return item.name==nweThis.UerName&&item.pass==nweThis.pass
      })
      console.log(abc,this.user)
      this.$refs[formName].validate((valid) => {
        if (valid&&abc) {
          this.$router.push("/mine");
          this.$store.commit("ISLOGIN",true);
          this.$store.commit("ISUSER",this.ruleForm.UerName)
          this.$notify({
            title: "成功",
            message: `欢迎你！${this.ruleForm.UerName}`,
            type: "success",
            duration:1000
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: "密码或账号不正确！！！",
            duration:1000
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
  #outDiv{
   float: left;
   position: absolute;
   left: 50%;
   top: 50%;
  }
  #chooseBtn {
  width: 50vw;
  display: flex;
  justify-content: center;
}
</style>
<style lang="less">
.el-message--success {
  border: 1px dashed blue;
}
.el-message--error {
  border: 1px dashed balck;
  width: 20px;
}
</style>